<script setup lang="ts">
import { useMenus } from '@/composables/useMenus'//导入响应式数据、
const { onSubmit,getAllMenus,form,topMenus,getMenuInfoById,msgText } = useMenus()//调用后，解构得到想要的东西
getAllMenus()

import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.params.id)
getMenuInfoById(route.params.id as string)
getMenuInfoById(route.params.id)

// import { getAll,saveOrUpdate } from '@/api/menus'
// import type { MenuItem } from '@/api/menus'
// import { computed, ref } from 'vue'
// import { ElMessage } from 'element-plus'

// // 存储返回的数据
// const allMenus = ref([] as MenuItem[])

// // 获取数据的完整逻辑
// const getAllMenus = async () => {
//     const {data} = await getAll()
//     if(data.code==="000000"){
//         menus.value = res.data.data
//     }else{
//         ElMessage.error("获取菜单信息失败！");
//         throw new Error("获取菜单信息失败！");
//     }
// }
// getAllMenus()

// // 顶级菜单筛选的逻辑
// const topMenus = computed(() => menus.value.filters(menu => menu.level === 0))

// import { reactive } from 'vue'
// const form = reactive({
//   name: '',
//   region: '顶层菜单',
//   date1: '',
//   date2: '',
//   delivery: false,
//   type: [],
//   resource: '',
//   desc: '',
//   num:'0',
// })

// const onSubmit = () => {
//   console.log('submit!')
// }
// import { ref } from 'vue'

// const num = ref(1)
// const handleChange = (value: number) => {
//   console.log(value)
// }
</script>

<template>
<el-form :model="form" label-width="auto" size="large" style="max-width: 600px;margin-left:50px;padding-top:50px;padding-left:30px;">

    <el-form-item label="菜单名称">
      <el-input v-model="form.name" />
    </el-form-item>

    <el-form-item label="菜单路径">
      <el-input v-model="form.href" />
    </el-form-item>

    <el-form-item label="上级菜单" style="max-width: 200px;">
      <el-select v-model="form.parentId">
        <el-option label="顶级菜单" :value="-1" />
        <el-option v-for="menu in topMenus" :key="menu.id" :label="menu.name" :value="menu.id" />
      </el-select>
    </el-form-item>

    <el-form-item label="描述">
      <el-input v-model="form.description" type="textarea" />
    </el-form-item>

     <el-form-item label="图标名称">
      <el-input v-model="form.icon" />
    </el-form-item>

    <el-form-item label="是否显示">
      <el-radio-group v-model="form.shown">
        <el-radio :value="true">是</el-radio>
        <el-radio :value="false">否</el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item label="排序">
      <el-input v-model="form.orderNum" />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="onSubmit">{{ msgText }}</el-button>
    </el-form-item>

  </el-form>
</template>

<style lang="scss" scoped>
.el-button{
margin-left: 70px;
}
</style>